<html>
  <head>
    <base href="/">

    <meta charset="UTF-8">

    <title>Example app</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <style>
      .loading,
      .loading:after,
      .loading:before {
        content: ' ';

        top: 0;

        width: 24px;
        height: 24px;
        border-radius: 50%;

        animation: spinner 1600ms infinite ease-in-out;
      }

      .loading {
        position: relative;

        margin: 64px auto;

        color: #555;

        animation-delay: -160ms;
      }

      .loading:after {
        left: 64px;
      }

      .loading:before {
        left: -64px;

        animation-delay: -320ms;
      }

      .loading:after,
      .loading:before {
        position: absolute;
      }

      @keyframes spinner {
        40% {
          box-shadow: 0 40px 0 0;
        }

        0%,
        80%,
        100% {
          box-shadow: 0 40px 0 -20px;
        }
      }
    </style>

    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.8.0/dist/zone.js"></script>
    <script src="https://unpkg.com/systemjs@0.20.19/dist/system.src.js"></script>

    <script src="config/systemjs-server.config.js"></script>

    <script>
      System.import('app').catch(function(err) { console.error(err); });
    </script>
  </head>

  <body>
    <my-app><div class="loading"></div></my-app>
  </body>
</html>
